<template>
	<!-- 领取爱电 -->
	<view id="container">
		<image class="bgi" src="https://z3.ax1x.com/2021/09/02/hD6zlV.png" mode=""></image>
		<view style="position: relative; height: 418rpx;">
			<!-- 头部 -->
			<!-- <view class="top">
				<view class="left">
					<view class="title">今日爱电</view>
					<view class="num">100</view>
				</view>
				<view class="right">
					<view class="title">全部爱电</view>
					<view class="num">1200</view>
				</view>
			</view> -->
			<!-- 海报 -->
			<view class="banner" @click="goto_share_page">
				<image class="img" src="https://z3.ax1x.com/2021/09/02/hD6yLD.jpg" mode=""></image>
				<view class="txt">分享好友领更多爱电>></view>
			</view>
		</view>
		<!-- 爱电领取 -->
	<!-- 	<view class="linqu">
			<image class="img" src="../../../static/mine/yjlqbj.jpg" mode=""></image>
			<view class="content">
				<view class="left-title">
					<image class="icon" src="../../../static/mine/fxtb.png" mode=""></image>
					<view class="left-txt">
						<view>有爱电未领取</view>
						<view class="love-dian">爱电+100</view>
					</view>
				</view>
				<view class="right-btn">一键领取</view>
			</view>
		</view> -->
		<!-- 爱电明细 -->
		<view class="love-dian-list">
			<view class="title">爱电明细</view>
			
			
			<view class="_list" v-for="(item,index) in list">
				<view class="_list-left" >
					<image class="touxiang" src="../../../static/index/lp.png" mode=""></image>
					<view class="middle">
						<view style="margin-bottom: 12rpx;">
							<!-- <text class="name" style="margin-right: 35rpx;">君子兰46</text> -->
							<text class="time">{{item.insert_time}}</text>
						</view>
						<view class="txt">{{item.remark}}</view>
					</view>
				</view>
				<view class="_list-right">+{{item.change}}</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			};
		},
		onLoad() {
			this.get_asset()
		},
		methods:{
			// 获取资产
			get_asset(){
				let self = this
				this.$u.api.get_asset({
					type:0,
					page:1,
					psize:10
				}).then(res=>{
					if(res.code==200){
						self.list=res.data.data
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			// 进入分享页面
			goto_share_page(){
				uni.navigateTo({
					url:'./love-circle'
				})
			}
			
		}
	}
</script>

<style lang="scss">
	#container {
		.bgi {
			width: 100%;
			height: 262rpx;
		}

		.top {
			width: 750rpx;
			display: flex;
			position: absolute;
			top: -220rpx;
			color: #fff;

			.left {
				flex: 1;
				text-align: center;
				border-right: 1px solid #D8D8D8;

				.title {
					font-size: 24rpx;
				}

				.num {
					width: 96rpx;
					margin: 0 auto;
					font-size: 24rpx;
					color: #fff;
					background-color: #029BFF;
					margin-top: 13rpx;
					border-radius: 13px;
				}
			}

			.right {
				flex: 1;
				text-align: center;

				.title {
					font-size: 24rpx;
				}

				.num {
					width: 96rpx;
					margin: 0 auto;
					text-align: center;
					font-size: 24rpx;
					color: #fff;
					background-color: #FF6A00;
					margin-top: 13rpx;
					border-radius: 13px;
				}
			}
		}

		.banner {
			height: 240px;
			position: absolute;
			top: -100rpx;
			left: 50%;
			transform: translateX(-50%);

			.img {
				width: 684rpx;
				height: 351rpx;
				box-shadow: 0px 2px 8px #c0c0c0;
				border-radius: 20px;
			}

			.txt {
				position: absolute;
				left: 68rpx;
				bottom: 57rpx;
				width: 290rpx;
				height: 32rpx;
				color: #fff;
				background: #2177BB;
				border-radius: 10px;
				font-size: 22rpx;
				text-align: center;
				letter-spacing: 2rpx;
			}	
		}

		.linqu {
			position: relative;
			width: 685rpx;
			left: 50%;
			transform: translateX(-50%);

			.img {
				width: 685rpx;
				height: 134rpx;
				box-shadow: 0px 2px 8px 0px rgba(4, 0, 0, 0.3);
			}

			.content {
				width: 620rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 auto;
				position: absolute;
				top: 50%;
				left: 29rpx;
				transform: translateY(-50%);

				.left-title {
					display: flex;
					align-items: center;

					.icon {
						width: 76rpx;
						height: 76rpx;
						margin-right: 25rpx;
					}

					.left-txt {
						font-size: 24rpx;

						.love-dian {
							font-size: 18rpx;
							color: #FA5A34;
						}
					}
				}

				.right-btn {
					width: 115rpx;
					height: 42rpx;
					line-height: 42rpx;
					font-size: 18rpx;
					color: #fff;
					background: linear-gradient(90deg, #FE9350, #FA4C16);
					border-radius: 21px;
					text-align: center;
					box-sizing: border-box;
				}
			}
		}

		.love-dian-list {
			padding: 26rpx 32rpx;
			box-shadow: 0px -4px 8px 0px rgba(208, 208, 208, 0.5);
			margin-top: 38rpx;
			border-radius: 30px;
			.title {
				font-size: 28rpx;
			}
			._list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 685rpx;
				border-bottom: 1rpx solid #eee;
				padding: 32rpx 26rpx;
				box-sizing: border-box;
				._list-left {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.touxiang {
						width: 59rpx;
						height: 59rpx;
						background-color: #007AFF;
						border-radius: 5rpx;
						margin-right: 25rpx;
					}
					.middle {
						.name {
							font-size: 22rpx;
						}
						.time {
							font-size: 18rpx;
							color: #575757;
						}
						.txt {
							font-size: 18rpx;
						}
					}
				}
				._list-right {
					color: #FA4E17;
				}
			}
		}
	}
</style>
